<template>
  <div>
    <el-table :data="data"
              :key="id"
              :row-key="rowKey"
              @sort-change="sortChange"
              @select="selectChange"
              @select-all="selectChange"
              :border="border"
              :tooltip-effect="tooltipEffect"
              header-row-class-name="gl-table-header"
              class="gl-table">
      <template v-for="(item, k) in columns">
        <el-table-column :label="item.label"
                         :prop="item.prop"
                         v-if="!item.columnType"
                         :key="k + Math.random()"
                         :class-name="sortList[item.prop] || ''"
                         :sortable="item.sortable"
                         :sort-orders="item.sortOrders"
                         :show-overflow-tooltip="item.tooltip !== false"
                         :width="item.width">
          <template slot-scope="scope">
            <!-- 插槽 -->
            <slot v-if="item.slot"
                  :name="item.slot"
                  :config="item"
                  :row="scope.row"></slot>
            <!-- 按钮 -->
            <template v-else-if="item.btns">
              <el-button type="text"
                         :class="item.class"
                         v-for="(btn, i) in item.btns"
                         :key="i"
                         @click="buttonCallback({scope, index: i, item: item})">
                {{btn}}
              </el-button>
            </template>
            <!-- 下拉菜单 -->
            <template v-else-if="item.dropdown">
              <el-dropdown @command="command">
                <el-button type="text">
                  {{item.title || item.dropdown[0]}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(opt, i) in item.dropdown"
                                    :key="i"
                                    :command="({scope,index: i, column: item})">
                    <!-- :command="Object.access(scope, {index: i, column: item})" -->
                    {{opt}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <!-- 图片 -->
            <template v-else-if="item.type === 'image'">
              <img :src="scope.row[item.prop]"
                   class="w80 h100 maxH"
                   :class="item.class">
            </template>
            <template v-else-if="item.type==='textarea'">
              <span v-html="scope.row[item.prop]"></span>
            </template>
            <!-- 默认table -->
            <!--<span v-else :class="item.class">{{(item.format || 's%').replace(/s%/g, scope.row[item.prop] || item.text || '')}}</span>-->
            <span v-else
                  :class="item.class">{{scope.row | formatText(k, item)}}</span>
          </template>

        </el-table-column>

        <el-table-column v-else
                         :label="item.label"
                         :prop="item.prop"
                         :key="k + Math.random()"
                         :class-name="sortList[item.prop] || ''"
                         :sortable="item.sortable"
                         :type="item.columnType"
                         :sort-orders="item.sortOrders"
                         :width="item.width"></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'GlTable',
  filters: {
    formatText(row, k, item) {
      let value = row[item.prop]
      if (typeof item.format === 'function') {
        return item.format(value, k, row, item)
      } else if (typeof item.format === 'string') {
        return item.format.replace(/s%/g, value)
      } else if (value === undefined || value === null) {
        return item.text
      } else {
        return value
      }
    }
  },
  props: {
    rowKey: {
      type: String,
      default: 'id'
    },
    defaultTab: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    border: {
      type: Boolean,
      default: true
    },
    tooltipEffect: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    columns(val) {
      this.sortListInit(val)
    }
  },
  data() {
    return {
      id: '',
      sortList: {}
    }
  },
  created() {
    this.id = Math.random()
    this.sortListInit(this.columns)
  },
  methods: {
    command(data) {
      this.$emit('dropdown', {
        ...data.scope,
        index: data.index,
        column: data.column
      })
    },
    buttonCallback(opt) {
      this.$emit('button', { ...opt.scope, index: opt.index, column: opt.item })
    },
    sortListInit(opt) {
      let sorts = {}
      opt.map(e => {
        if (e.sortable === 'custom') {
          sorts[e.prop] = ''
          e.sortOrders = ['ascending', 'descending', null]
        }
      })
      this.sortList = sorts
    },
    sortChange({ column, prop, order }) {
      let list = ['ascending', 'descending', null, 'ascending', 'descending']

      this.columns.map(col => {
        if (col.prop === prop) {
          let ind = list.indexOf(order)
          col.sortOrders = list.slice(ind + 1, ind + 4)
        } else {
          col.sortOrders = list.slice(0, 3)
        }
      })

      Object.keys(this.sortList).map(e => {
        this.sortList[e] = e === prop ? order || '' : ''
      })

      this.$emit('sort-change', column, prop, order)
      this.$emit('sortChange', column, prop, order)
    },
    selectChange(...arg) {
      this.$emit('select', ...arg)
    }
  }
}
</script>

<style scoped lang="less">
.gl-table {
  /deep/ [class] {
    &.gl-table-header {
      color: #333;
    }
  }
  .el-button.el-button--text {
    padding: 0;
  }
}
</style>
